<template>
	<view class="container">
		
		<view>
			<diy-nav :title="null" :bgColor="statusBgColor" :bgColor2="statusBgColor" :backColor="backColor"></diy-nav>
		</view>
		<view class="content" v-if="info.video_url!=''">
			<Masks v-if="show_point ||show_end"></Masks>
			<video style="width: 100%;" id="my_video" autoplay :controls="false" @click="clickView()"
			  :show-progress="true"   @play="playStart"  @ended="end" @pause="pauseSecond" @waiting="waitting" @error="error"
			    :show-center-play-btn="false" @timeupdate="updateProgress"   @loadedmetadata="onLoadedMetadata" :show-play-btn="false" :enable-progress-gesture="false"  :show-fullscreen-btn="false" :src="info.video_url"></video>
			<process-bar  :progress="progress" :duration="duration" disabled></process-bar>
			<view style="position: absolute;top: 87%;right: 92rpx;font-size: 24rpx;color:#FFFFFF;">{{formatSecondsToHHMMSS(process_s)}}</view>
			<view style="position: absolute;top: 87%;right: 20rpx;font-size: 24rpx;color:#FFFFFF;">/{{formatSecondsToHHMMSS(duration)}}</view>
			<text v-show="flag && !show_point && !show_end" class="cell-icon yticon icon-player player_btn"></text>
			<!-- 互动 -->
			<view v-show="show_point" class="point">
				<view style="font-size: 28rpx;text-align: center;">{{interact.question}}</view>
				<view style="text-align: center;">
					<view class="point-item" @click="answerApply(item)" v-for="(item,index) in interact.answer" :key="index">{{item}}</view>
				</view>
			</view>
			<!-- 结束弹窗 -->
			<view v-if="show_end"  class="point">
				<!-- <view style="font-size: 28rpx;" v-if="score>0">根据您的互动选择，将获得<text style="color:#0191FF">{{score}}</text>积分快去报名线下课程，学习更多技能吧</view> -->
				<view style="font-size: 28rpx;text-align: center;">快去报名线下课程，学习更多技能吧</view>
				<view style="text-align: center;">
					<!-- <view v-if="score>0" @click="giveScore()" class="point-item" style="background: #0191FF;">领取积分</view> -->
					<view @click="navTo('/pages/course/index',1)" class="point-item" style="background: #0191FF;">去报名</view>
					<view @click="restart()" class="point-item" style="background: rgba(255,255,255,0.1);border:1px solid #FFFFFF">重新播放</view>
					
				</view>
			</view>
			
		</view>
		<view v-else style="display: flex;width: 100%;height: 65vh;align-items: center;justify-content: center;" >
			<swiper class="swiper" :indicator-dots="indicator" circular indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FF0000" style="height: 100%;width: 100%;">
				<swiper-item v-for="(item,index) in info.pics" :key="index" style="display: flex;align-items: center;">
					<image  :src="item" mode="widthFix"   style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom_box" :style="{'bottom': _bottom+'rpx;'}">
			<view class="title">
				<view @click="clickTo('/pages/course/school?id='+info.campus_info.id+'&name='+info.campus_info.name)">@{{info.campus_info.name}}</view>
				<view style="padding: 0rpx 10rpx;">·</view>
				<view style="font-size: 30rpx;">{{info.publish_time}}</view>
			</view>
			<view class="address" @click="toLocation()">
				<text class="cell-icon yticon icon-address"></text>
				<view style="margin-left: 10rpx;width: 60rpx;">地址</view>
				<view style="width: 2rpx;border: 1px solid #b3b1b1;height: 32rpx;margin: 16rpx"></view>
				<view class="single-line">{{info.campus_info.address}}</view>
			</view>


		</view>
	
		<view class="bottom_box" :style="{'bottom': _bottom2+'rpx','width':'80%'}">
			<view class="bottom_intro" :style="{'display': !open?'':'inline-block'}">{{intro}}<text v-if="info.str_length>39&&!open">...</text><text v-if="info.str_length>39&&!open" style="font-weight: 600;" @click="toggleOpen()" >展开</text><text v-if="open" style="font-weight: 600;padding-left: 10rpx;" @click="toggleOpen()" >收起</text></view>
		</view>
		<view class="service" @click="openDial()" :style="{'bottom': _bottom2+50+'rpx'}">
		<text class="cell-icon yticon icon-service"></text>
		</view>
				
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="makePhone()" class="pop-child" style="margin-bottom: 10rpx;">呼叫 {{info.campus_info.contact}}</view>
				<view class="pop-child" @click="cancelPop()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import DiyNav from "@/components/diy-nav-back"
	import ProcessBar from "@/components/processbar"
	import Masks from '@/components/mask';
	export default {
		components: {
			DiyNav,
			ProcessBar,
			Masks
		},
		data() {
			return {
				indicator:true,
				recommend_id:0,
				statusBgColor:'#0c0c0c',
				backColor:'#FFFFFF',
				c_second: 0,
				timer: null,
				flag: false,
				isExpanded: false,
				_bottom: 190,
				info: {},
				_bottom2:20,
				open:false,
				intro:'',
				show_point:false,
				
				interact:{},
				mutual:[],
				progress: 0, // 当前播放进度
				duration: 0, // 视频总时长
				process_s:0 ,//当前播放进度（秒）
				user_mutual:[],
				show_end:false,
				score:0,
				video_t:1,
				test:[]
			}
		},
		
		onLoad(option) {
			this.recommend_id = option.id;
			this.video_t = option.t;
			// this.recommend_id= 1
			this.getDetail();
			this.getHeight();			
		},
		beforeCreate() {

			clearInterval(this.timer);
			this.timer = null
		},
		beforeDestroy() {

			clearInterval(this.timer);
			this.timer = null
		},

		onShow() {

			clearInterval(this.timer);
			this.timer = null
		},
		onReady() {
			this.videoContext = uni.createVideoContext('my_video',this)
		},
		onPageScroll(e) {

		},
		methods: {
			
			toLocation(){
				
				let that =this;
				uni.openLocation({
					latitude:that.info.campus_info.latitude*1,
					longitude:that.info.campus_info.longitude*1,
					name:that.info.campus_info.address,
					scale:16
				})
			},
			clickTo(url){
				uni.navigateTo({
					url:url
				})
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.campus_info.contact
				})
			},
			openDial(){
				// console.log(this.$refs.popup[0],6666);return;
				this.$refs.popup.open('bottom')
			},
			cancelPop(){
				this.$refs.popup.close();
			},
			restart(){
				this.score=0;
				this.show_point=false;
				this.flag=false;
				this.show_end=false;
				this.user_mutual=[];
				this.videoContext.play();
			},
			async answerApply(item){
				if(this.interact.right_answer==item){
					this.score+=this.interact.score;
				}
				let obj={id:this.interact.id,answer:item};
				this.user_mutual.push(obj);
				// console.log(this.user_mutual);
				this.videoContext.play();
				this.show_point=false;
				this.flag=false;
			},
			formatSecondsToHHMMSS(seconds) {
			  const hours = Math.floor(seconds / 3600);
			  const minutes = Math.floor((seconds - (hours * 3600)) / 60);
			  const secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
			  
			  if(hours>0){
				   return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			  }
			   return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			 
			},
			onLoadedMetadata(event) {
				// 获取视频的总时长
				this.duration = event.detail.duration;
				
			},
		    updateProgress(event) {
				// 更新播放进度
				this.progress = event.detail.currentTime / this.duration;
				this.process_s = event.detail.currentTime
		    },
			getHeight() {
				let sysInfo = uni.getSystemInfoSync();
			
				let h1 = sysInfo.safeArea.bottom;
				let h2 = sysInfo.screenHeight;
				// console.log(h1, h2, 555)
				let initH =(h2 - h1) * 2;
				if (h1 != h2) {
					this._bottom = 190 + initH;
					this._bottom2 = initH+20;
					return;
				}
				this._bottom2  =20;
				this._bottom = 190;
			},
			getSafeHeight() {
				let sysInfo = uni.getSystemInfoSync();
				// console.log(sysInfo.platform, sysInfo.safeArea.bottom, sysInfo.windowHeight, sysInfo.screenHeight, 8888888)
			},
			async getDetail() {
				let params = {
					r_id: this.recommend_id
				}
				let data ;
				if(this.video_t==1){
					data= await Api.apiCall('get', Api.apiName.recommend_detail, params, true);
				}else{
				    data = await Api.apiCall('get', Api.apiName.normal_detail, params, true);
				}
				if (!data || data.code != 0) {
					setTimeout(function(){
						uni.navigateBack()
					},1000)
					return;
				}
				this.info = data.data;
				this.intro = data.data.intro;
				if(this.video_t==1){
					this.mutual=data.data.mutual;
				}		
				
			},
			async giveScore() {
				let params = {
					r_id: this.recommend_id,
					mutual:JSON.stringify(this.user_mutual)
				}
				let data = await Api.apiCall('post', Api.apiName.course_give_score, params, true);
				if (!data) {
					return;
				}
				if(!data.data){this.$api.msg(`领取异常`);return}
				this.$api.msg(`领取成功`);
				this.score=0;//置为0变相隐藏按钮
			},
			toggleText() {
				this.isExpanded = !this.isExpanded;
				if (this.isExpanded) {
					this._bottom = 204
				} else {
					this._bottom = 80
				}
			},
			toggleOpen(){
				this.open = !this.open;
				// console.log(this.open,333)
				
				if(this.open){
					this._bottom2=this._bottom2-10;
					this.intro = this.info.long_intro
				}else{
					this._bottom2=this._bottom2+10;
					this.intro = this.info.intro
				}
				
			},
			playVideo() {
				this.c_second = 3
				this.videoContext.seek(3)
				this.videoContext.play();
			},
			playStart() {
				var that = this;
				// console.log('begin play')
				that.timer = setInterval(function() {
					that.checkMutual()
					// console.log('begin当前播放到' + that.c_second)
					that.c_second++;
				}, 1000)

			},
			checkMutual(){
				if(this.mutual.length==0)return;
				let index = this.mutual.findIndex(obj => obj.point == this.c_second);
				if(index==-1)return;
				clearInterval(this.timer)
				this.timer = null;
				this.videoContext.pause();
				
				this.interact=this.mutual[index];
				this.flag = !this.flag;
				this.show_point=true;
				
				
			},
			end() {
				clearInterval(this.timer);
				this.timer = null
				this.$api.msg(this.c_second)
				this.c_second = 0;
				this.flag = true;
				// console.log('结束');
				this.videoContext.stop();
				this.show_end=true;
			},
			pauseSecond() {
				clearInterval(this.timer)
				this.timer = null;
				// this.$api.msg(`暂停播放，当前秒`+this.c_second)
				// console.log('暂停播放，当前秒' + this.c_second)
			},
			clickView() {
				if(this.show_point||this.show_end){
					// console.log('请选择选项后继续')
					return;
				}
				this.flag = !this.flag;
				var _msg = this.flag ? '暂停' : '播放'
				// console.log('计时器' + this.timer,_msg)
				// this.$api.msg(_msg)
				if (this.flag) {
					this.videoContext.pause();

					// this.flag = false;
					return;
				}
				if (!this.flag) {
					this.c_second++;
					this.videoContext.play();

					// this.flag = true;
					return;
				}

			},
			error() {
				this.timer = null
				clearInterval(this.timer);
				this.c_second = 0;
				this.$api.msg(`播放出错`)
			},
			waitting() {
				console.log('waiting');return;//真机不需要操作以下代码
				clearInterval(this.timer);
				// console.log('加载中...')
				let that = this;
				this.timer = null;
				that.timer = setInterval(function() {
					that.c_second++;

					// console.log('当前播放到' + that.c_second)
					// that.$api.msg(`当前播放到：`+that.c_second)
					that.checkMutual()
				}, 1000)
			},
			navTo(url,index){
				uni.switchTab({
					url:url
				});
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #0c0c0c;
	}

	.container {
		height: 100vh;
	}

	.content {
		// margin-top: 25%;
		position: relative;
		top: 35%;
		transform: translateY(-50%);
	}

	.player_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.point{
		color:#FFFFFF;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 76%;
		z-index:3
	}
	.point-item{
		padding: 10rpx;
		background: #777C7E;
		border-radius: 10rpx;
		margin:22rpx;
		font-size: 24rpx;
	}

	.bottom_box {
		position: absolute;
		bottom: 0rpx;
		left: 36rpx;
		right: 36rpx;
		color: #ffffff;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-weight: 600;
		align-items: center;
	}

	.address {
		display: flex;
		height: 30px;
		line-height: 30px;
		background: #363636;
		border-radius: 6rpx;
		margin-top: 20rpx;
		padding: 0rpx 10rpx;
		font-size: 28rpx;
	}

	.collspan {
		// padding: 20rpx;
	}

	.uni-collapse {
		background-color: transparent !important;
	}

	.uni-collapse-item__title.uni-collapse-item-border {
		border-bottom: transparent !important;
	}

	.uni-collapse-item__title-box {
		color: #FFFFFF !important;
		background-color: transparent !important;
		padding: 0 !important;
		height: 60rpx !important;
		line-height: 60rpx !important;
	}

	.uni-collapse-item__wrap {
		background-color: transparent !important;
	}

	.uni-collapse-item__wrap-content {
		color: #FFFFFF !important;
	}

	.uni-collapse-item__wrap-content.open {
		border-bottom: none;
	}

	.c_title {
		font-size: 30rpx;
		padding: 20rpx 0rpx;
	}

	.single-line {
		white-space: nowrap;
		/* 让文字不换行 */
		overflow: hidden;
		/* 隐藏多余部分 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.text-container {
		cursor: pointer;
	}

	.single-show {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bottom_intro {
		color: #FFFFFF;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		height: 160rpx;
	}
	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;		
		background-color:rgba(153,153,153,0.1);
	}
	.service{
		background: #FFF;
		height: 80rpx;
		width: 80rpx;
		bottom: 70rpx;
		position: absolute;
		/* z-index: 2222222; */
		/* color: red; */
		align-items: center;
		/* line-height: 50px; */
		justify-content: center;
		display: flex;
		border-radius: 12rpx;
		right: 20rpx;
	}
	.cpt-mask{
		top: 0 !important;
		background-color: rgba(0,0,0,0.6) !important;
	}
	.pop-child{
		height: 100rpx;
		background: #FFFFFF;
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>